<template>
  <div class="netease-container">
    <!-- 左侧导航菜单 -->
    <div class="sidebar">
      <div class="logo">
        <i class="el-icon-headset"></i>
        <span>洛页云音乐</span>
      </div>

      <div class="menu-section">
        <div class="menu-title">推荐</div>
        <div class="menu-item" :class="{ active: activeMenu === 'ListenNow' }" @click="changeView('ListenNow')">
          <i class="el-icon-headset"></i>
          <span>听吧</span>
        </div>
        <div class="menu-item" :class="{ active: activeMenu === 'Videos' }" @click="changeView('Videos')">
          <i class="el-icon-video-camera"></i>
          <span>视频</span>
        </div>
        <div class="menu-item" :class="{ active: activeMenu === 'HiFiMusic' }" @click="changeView('HiFiMusic')">
          <i class="el-icon-mic"></i>
          <span>HIFI发烧音乐</span>
        </div>
      </div>

      <div class="menu-section">
        <div class="menu-title">我的音乐</div>
        <div class="menu-item" :class="{ active: activeMenu === 'MyListen' }" @click="changeView('MyListen')">
          <i class="el-icon-collection"></i>
          <span>我的「听吧」</span>
        </div>
        <div class="menu-item" :class="{ active: activeMenu === 'DownloadManager' }"
          @click="changeView('DownloadManager')">
          <i class="el-icon-download"></i>
          <span>下载管理</span>
        </div>
        <div class="menu-item" :class="{ active: activeMenu === 'LocalMusic' }" @click="changeView('LocalMusic')">
          <i class="el-icon-folder"></i>
          <span>本地音乐</span>
        </div>
        <div class="menu-item" :class="{ active: activeMenu === 'MyCloud' }" @click="changeView('MyCloud')">
          <i class="el-icon-cloudy"></i>
          <span>我的云盘</span>
        </div>
        <div class="menu-item" :class="{ active: activeMenu === 'RecentPlay' }" @click="changeView('RecentPlay')">
          <i class="el-icon-time"></i>
          <span>最近播放</span>
        </div>
      </div>

      <div class="menu-section">
        <div class="menu-title">自建菜单</div>
        <div class="menu-item">
          <i class="el-icon-star-off"></i>
          <span>我的收藏</span>
        </div>
      </div>

      <div class="playlists">
        <div class="playlist-item">
          <i class="el-icon-notebook-2"></i>
          <span>默认列表</span>
        </div>
        <div class="playlist-item">
          <i class="el-icon-notebook-2"></i>
          <span>老歌曲</span>
        </div>
        <div class="playlist-item">
          <i class="el-icon-notebook-2"></i>
          <span>英文</span>
        </div>
      </div>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content">
      <!-- 顶部导航 -->
      <div class="top-nav">
        <div class="search-box">
          <el-input placeholder="搜索音乐、歌手、歌词" suffix-icon="el-icon-search" v-model="searchKeyword"></el-input>
        </div>
      </div>

      <!-- 动态内容区域 -->
      <div class="content-container">
        <component :is="currentView" :music-list="list" :current-index="currentIndex" @play="play" @open-dir="openDir">
        </component>
      </div>
    </div>

    <!-- 底部播放控制栏 -->
    <div class="player-bar">
      <div class="player-left">
        <div class="cover-mini">
          <img :src="currentMusic.pic || defaultCover" :class="{ rotate: isPlaying }">
        </div>
        <div class="music-info">
          <div class="music-title">{{ currentMusic.title ||currentMusic.name || '未知歌曲' }}</div>
          <div class="music-artist">{{ currentMusic.artist || '未知歌手' }}</div>
        </div>
        <div class="like-btn">
          <i class="el-icon-star-off"></i>
        </div>
      </div>

      <div class="player-center">
        <div class="control-buttons">
          <el-button circle class="control-btn" @click="prev">
            <i class="el-icon-back"></i>
          </el-button>
          <el-button circle class="play-btn" @click="togglePlay">
            <i :class="isPlaying ? 'el-icon-video-pause' : 'el-icon-video-play'"></i>
          </el-button>
          <el-button circle class="control-btn" @click="next">
            <i class="el-icon-right"></i>
          </el-button>
        </div>
        <div class="progress-bar">
          <span class="time">{{ currentTime }}</span>
          <el-slider v-model="progress" :max="duration" @change="seek"></el-slider>
          <span class="time">{{ durationText }}</span>
        </div>
      </div>

      <div class="player-right">
        <el-button circle class="volume-btn" @click="toggleMute">
          <i :class="isMuted ? 'el-icon-turn-off-microphone' : 'el-icon-microphone'"></i>
        </el-button>
        <el-slider v-model="volume" class="volume-slider" @input="changeVolume"></el-slider>
        <el-button circle class="playlist-btn" @click="showPlaylist = !showPlaylist">
          <i class="el-icon-menu"></i>
        </el-button>
      </div>

      <!-- 隐藏的音频播放器 -->
      <audio ref="audioPlayer" :src="currentMusic.src" @timeupdate="updateProgress" @ended="onEnded"
        @loadedmetadata="onLoadedMetadata"></audio>

      <!-- 播放列表弹窗 -->
      <el-dialog title="播放列表" :visible.sync="showPlaylist" width="40%" top="10vh">
        <div class="playlist-dialog">
          <div v-for="(item, index) in list" :key="index" class="playlist-item"
            :class="{ 'active': currentIndex === index }" @click="play(index)">
            <div class="item-index">{{ index + 1 }}</div>
            <div class="item-info">
              <div class="item-title">{{ item.title }}</div>
              <div class="item-name">{{ item.name }}</div>
              <div class="item-artist">{{ item.artist }}</div>
            </div>
            <div class="item-duration">{{ formatTime(item.duration || 0) }}</div>
          </div>
        </div>
      </el-dialog>

    </div>
  </div>
</template>

<script>
import { GetList, GetFromJson } from "../../wailsjs/go/controller/Audio";
import ListenNow from '../components/player/IndexNow.vue';
import Videos from '../components/player/Videos.vue';
import HiFiMusic from '../components/player/HiFiMusic.vue';
// import MyListen from './MyListen.vue';
// import DownloadManager from './DownloadManager.vue';
import LocalMusic from '../components/player/LocalMusic.vue';
// import MyCloud from './MyCloud.vue';
// import RecentPlay from './RecentPlay.vue';

export default {
  name: 'NeteasePlayer',
  components: {
    ListenNow,
    Videos,
    HiFiMusic,
    // MyListen,
    // DownloadManager,
    LocalMusic,
    // MyCloud,
    // RecentPlay
  },
  data() {
    return {
      activeMenu: 'ListenNow',
      currentView: 'ListenNow',
      searchKeyword: '',
      list: [],
      currentIndex: 0,
      isPlaying: false,
      progress: 0,
      duration: 0,
      currentTime: '00:00',
      durationText: '00:00',
      volume: 70,
      isMuted: false,
      showPlaylist: false,
      defaultCover: require('@/assets/player.png')
    };
  },
  computed: {
    currentMusic() {
      return this.list[this.currentIndex] || {};
    }
  },
  methods: {
    changeView(viewName) {
      this.activeMenu = viewName;
      this.currentView = viewName;
    },
    // 加载本地音乐
    async loadLocalMusic() {
      try {
        const res = await GetFromJson();
        if (res && res.length > 0) {
          this.list = res;
          // 设置默认封面
          this.list = this.list.map(item => {
            return {
              ...item,
              pic: item.pic || this.defaultCover
            };
          });
        }
      } catch (error) {
        console.error('加载本地音乐失败:', error);
        this.$message.error('加载本地音乐失败');
      }
    },

    // 打开文件夹选择
    async openDir() {
      try {
        const res = await GetList();
        if (res.code === 200) {
          this.list = res.data.map(item => {
            return {
              ...item,
              pic: this.defaultCover
            };
          });
          this.$message.success(`已加载 ${this.list.length} 首音乐`);

          // 自动播放第一首
          if (this.list.length > 0) {
            this.play(0);
          }
        } else {
          this.$message.warning(res.msg || '未选择文件夹');
        }
      } catch (error) {
        console.error('打开文件夹失败:', error);
        this.$message.error('打开文件夹失败');
      }
    },

    // 播放音乐
    play(index) {
      this.currentIndex = index;
      this.$nextTick(() => {
        const audio = this.$refs.audioPlayer;
        audio.load();
        audio.play()
          .then(() => {
            this.isPlaying = true;
          })
          .catch(error => {
            console.error('播放失败:', error);
            this.$message.error('播放失败，请检查文件路径');
          });
      });
    },

    // 切换播放状态
    togglePlay() {
      const audio = this.$refs.audioPlayer;
      if (this.isPlaying) {
        audio.pause();
      } else {
        audio.play();
      }
      this.isPlaying = !this.isPlaying;
    },
    // 上一首
    prev() {
      this.currentIndex = (this.currentIndex - 1 + this.list.length) % this.list.length;
      this.play(this.currentIndex);
    },

    // 下一首
    next() {
      this.currentIndex = (this.currentIndex + 1) % this.list.length;
      this.play(this.currentIndex);
    },


    // 跳转播放进度
    seek(time) {
      this.$refs.audioPlayer.currentTime = time;
    },

    // 更新播放进度
    updateProgress() {
      const audio = this.$refs.audioPlayer;
      this.progress = Math.floor(audio.currentTime);
      this.currentTime = this.formatTime(audio.currentTime);
    },

    // 当音频加载完成
    onLoadedMetadata() {
      const audio = this.$refs.audioPlayer;
      this.duration = Math.floor(audio.duration);
      this.durationText = this.formatTime(audio.duration);
    },

    // 当播放结束
    onEnded() {
      this.next();
    },

    // 切换静音
    toggleMute() {
      this.isMuted = !this.isMuted;
      this.$refs.audioPlayer.muted = this.isMuted;
    },

    // 改变音量
    changeVolume(value) {
      this.$refs.audioPlayer.volume = value / 100;
    },

    formatTime(seconds) {
      const mins = Math.floor(seconds / 60).toString().padStart(2, '0');
      const secs = Math.floor(seconds % 60).toString().padStart(2, '0');
      return `${mins}:${secs}`;
    }
  },
  created() {
    this.loadLocalMusic(); // 加载本地音乐
    // 模拟播放进度更新
    setInterval(() => {
      if (this.isPlaying && this.progress < this.duration) {
        this.progress++;
        this.currentTime = this.formatTime(this.progress);
      }
    }, 1000);
  }
};
</script>

<style lang="scss" scoped>
.netease-container {
  display: flex;
  height: 100vh;
  background-color: #f5f5f5;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}

.sidebar {
  width: 220px;
  background-color: #f8f8f8;
  border-right: 1px solid #e1e1e1;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  box-sizing: border-box;
  overflow-y: auto;

  .logo {
    display: flex;
    align-items: center;
    padding: 0 20px 20px;
    color: #ec4141;
    font-size: 18px;
    font-weight: bold;

    i {
      font-size: 24px;
      margin-right: 10px;
    }
  }

  .menu-section {
    margin-bottom: 20px;
    padding: 0 20px;

    .menu-title {
      font-size: 12px;
      color: #999;
      margin-bottom: 10px;
      padding-left: 10px;
    }

    .menu-item {
      display: flex;
      align-items: center;
      padding: 8px 10px;
      border-radius: 4px;
      cursor: pointer;
      color: #333;
      font-size: 14px;
      transition: all 0.3s;

      i {
        margin-right: 8px;
        font-size: 16px;
      }

      &:hover {
        background-color: #f0f0f0;
      }

      &.active {
        background-color: #e6e6e6;
        color: #ec4141;
        font-weight: bold;
      }
    }
  }

  .playlists {
    padding: 0 20px;
    margin-top: auto;

    .playlist-item {
      display: flex;
      align-items: center;
      padding: 8px 10px;
      border-radius: 4px;
      cursor: pointer;
      color: #333;
      font-size: 14px;

      i {
        margin-right: 8px;
        font-size: 16px;
      }

      &:hover {
        background-color: #f0f0f0;
      }
    }
  }
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.top-nav {
  padding: 10px 20px;
  border-bottom: 1px solid #e1e1e1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;

  .search-box {
    width: 250px;

    ::v-deep .el-input__inner {
      border-radius: 20px;
      height: 36px;
    }
  }
}

.content-container {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background-color: #fafafa;
}

.player-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background-color: #fff;
  border-top: 1px solid #e1e1e1;
  display: flex;
  align-items: center;
  padding: 0 20px;
  z-index: 1000;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);

  .player-left {
    display: flex;
    align-items: center;
    width: 250px;

    .cover-mini {
      width: 50px;
      height: 50px;
      border-radius: 4px;
      overflow: hidden;
      margin-right: 15px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;

        &.rotate {
          animation: rotateCover 10s linear infinite;
        }
      }
    }

    .music-info {
      flex: 1;
      overflow: hidden;

      .music-title {
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 5px;
      }

      .music-artist {
        font-size: 12px;
        color: #999;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    .like-btn {
      margin-left: 15px;
      color: #999;
      font-size: 18px;
      cursor: pointer;

      &:hover {
        color: #ec4141;
      }
    }
  }

  .player-center {
    flex: 1;
    justify-content: center; // 水平居中对齐
    align-items: center;    // 垂直居中对齐

    .control-buttons {
      display: flex;
      justify-content: center;
      align-items: center;

      .control-btn {
        width: 30px;
        height: 30px;
        font-size: 14px;
        border: none;
        background: transparent;
        color: #666;

        &:hover {
          color: #333;
        }
      }

      .play-btn {
        width: 40px;
        height: 40px;
        font-size: 18px;
        margin: 0 15px;
        background: #ec4141;
        color: white;
        border: none;
        box-shadow: 0 2px 5px rgba(236, 65, 65, 0.3);

        &:hover {
          background: #d33a3a;
        }
      }
    }

    .progress-bar {
      display: flex;
      align-items: center;

      .time {
        width: 40px;
        font-size: 12px;
        color: #999;
      }

      ::v-deep .el-slider {
        flex: 1;
        margin: 0 10px;

        .el-slider__runway {
          height: 3px;
          background-color: #e0e0e0;
        }

        .el-slider__bar {
          height: 3px;
          background-color: #ec4141;
        }

        .el-slider__button {
          width: 10px;
          height: 10px;
          border: 2px solid #ec4141;
        }
      }
    }
  }

  .player-right {
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .volume-btn {
      width: 30px;
      height: 30px;
      font-size: 16px;
      border: none;
      background: transparent;
      color: #666;
      margin-right: 10px;

      &:hover {
        color: #333;
      }
    }

    .volume-slider {
      width: 100px;
      margin-right: 15px;

      ::v-deep .el-slider__runway {
        height: 3px;
        background-color: #e0e0e0;
      }

      ::v-deep .el-slider__bar {
        height: 3px;
        background-color: #999;
      }

      ::v-deep .el-slider__button {
        width: 10px;
        height: 10px;
        border: 2px solid #999;
      }
    }

    .playlist-btn {
      width: 30px;
      height: 30px;
      font-size: 16px;
      border: none;
      background: transparent;
      color: #666;

      &:hover {
        color: #333;
      }
    }
  }
}

@keyframes rotateCover {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 768px) {
  .netease-container {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    height: auto;
    padding: 10px 0;
    flex-direction: row;
    flex-wrap: wrap;
    border-right: none;
    border-bottom: 1px solid #e1e1e1;

    .logo {
      padding: 0 10px 10px;
    }

    .menu-section {
      margin-bottom: 0;
      padding: 0 10px;
      flex: 1;
      min-width: 120px;

      .menu-item {
        padding: 6px 8px;
      }
    }

    .playlists {
      display: none;
    }
  }

  .player-bar {
    .player-left {
      width: auto;
      min-width: 0;

      .music-info {
        display: none;
      }
    }

    .player-center {
      flex: 1;
      padding: 0 10px;
    }

    .player-right {
      display: none;
    }
  }
}
</style>